<%@ include file="template/CommonHeader.jsp" %>
<link href="/FMTOOL_WEB/resources/plugins/forms/select/select2.css" type="text/css" rel="stylesheet" />
    <div id="wrapper">
        <%@ include file="template/LeftNavigator.jsp" %>


        <!--Body content-->
        <div id="content" class="clearfix">
            <div class="contentwrapper"><!--Content wrapper-->
                <%@ include file="template/PageHeader.jsp" %>
                <!-- Build page from here: -->
                <%@ include file="template/CommonSuccessMessage.jsp" %>
                <%@ include file="template/CommonErrorMessage.jsp" %>
                
                 <div class="row-fluid">
                        <div class="span12">
                            <div class="box">
                                <div class="title">
                                    <h4><span>New Node Form</span></h4>                                    
                                </div>
                                
                                <div class="content">
                                   
                                    <form class="form-horizontal" id="form-addNode" action="saveNode.action"  method="post">										
                                        <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.label">Node Name<font style="color:red">*</font></label>
                                                    <input class="span9" type="text" value="<s:property value='node.label' />" name="node.label" id="label" />						
													
                                                </div>
                                            </div>
                                        </div>
										
										 <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.description">Description<font style="color:red">*</font></label>
                                                    <input class="span9" type="text"  value="<s:property value='node.description'/>" name="node.description" id="description" />
                                                </div>
                                            </div>
                                        </div> 
										
										<div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.dataType">Data Type<font style="color:red">*</font></label>
                                                    <div class="span9 controls sel"> 
	                                                    <select  name="node.dataType" id="dataType" class="nostyle" style="width:100%;">
	                                                       <option></option>
	                                                       <option value="INTEGER">INTEGER</option>
	                                                       <option value="NONE">NONE</option>																
		                                                </select>
	                                                </div>
                                                    
                                                </div>
                                            </div>
                                        </div>
										
										<div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.nodeTypeId">Node Type<font style="color:red">*</font></label>
                                                    <div class="span9 controls sel">
	                                                    <select  name="node.nodeTypeId" id="nodeTyp" class="nostyle" style="width:100%;">
	                                                       <option></option>
	                                                       <option value="1">HEADER1</option>
	                                                       <option value="2">KPI</option>
	                                                       <option value="3">COMMENT</option>
	                                                       <option value="4">HEADER2</option>																
		                                                </select>
	                                                </div>
                                                </div>
                                            </div>
                                        </div>
										<div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.segmentId">Segment<font style="color:red">*</font></label>
                                                    <div class="span9 controls sel">   
	                                                    <select  name="node.segmentId" id="segmentId" class="nostyle" style="width:100%;" onchange="fetchParentNodeSelectBox(this.value)">
					                                    		<option></option>
					                                  		<s:iterator value="segmentList" id="segmentLst">
					                                  	   	    <option value="<s:property value="segmentId" />"><s:property value="segmentName" /></option>
									     					</s:iterator>
						                                </select>
					                                </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="node.parentNode">Parent Node</label>
                                                    <div class="span9 controls sel" id="parentNodeDiv">   
	                                                    <select  name="node.parentNode" id="parentNod" class="nostyle" style="width:100%;">
					                                    		<option></option>
						                                </select>
					                                </div>
                                                </div>
                                            </div>
                                        </div>
										
                                        <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <div class="form-actions">
                                                    <div class="span3"></div>
                                                    <div class="span9 controls">
                                                        <button type="submit" name="submit" class="btn marginR10" value="Submit">Save changes</button>
                                                    </div>
                                                    </div>
                                                </div>
                                            </div> 
                                        </div>
                                    </form>
                                 
                                </div>

                            </div><!-- End .box -->

                        </div><!-- End .span12 -->

                    </div><!-- End .row-fluid -->  
                
                <!-- End .row-fluid -->

                
            </div>
            <!-- End contentwrapper -->
        </div><!-- End #content -->
    
    </div><!-- End #wrapper -->
    
<%@ include file="template/CommonJS.jsp" %>    
	 <script type="text/javascript">
		  function fetchParentNodeSelectBox(segmentId)
		  {
		    if(segmentId=="none")
		       return;
		    $("#parentNodeDiv").html("<img src='/FMTOOL_WEB/resources/images/loaders/circular/011.gif' border='0' />");
					  		  var x= $.ajax({
		    		  		  url: "parentNodeListString.action",
					  		  type: 'POST',
				      		  async: false,
					  		  data: "segmentId=" +segmentId+"&parentNode=-1"
					  		  }).responseText;
						      
			$("#parentNodeDiv").html(x);
		  }
		
		
				$(document).ready(function() { 		

	    			$("#dataType").select2();
	    			$("#nodeTyp").select2();
	    			$("#segmentId").select2();
	    			$("#parentNod").select2();
	    			
					$("#form-addNode").validate({
    					ignore: null,
    					ignore: 'input[type="hidden"]',
    					rules: {					  			
							 "node.label": "required",
							 "node.description": "required",
                   			 "node.dataType":{
                    			required: function(element) {
                        		if( $("#dataType").val() =='none'){
                            		return false;
                        		}
                        		else{return true;}
                   			  }},
                   			  "node.nodeTypeId":{
                    			required: function(element) {
                        		if( $("#nodeTyp").val() =='none'){
                            		return false;
                        		}
                        		else{return true;}
                   			  }},"node.segmentId":{
                    			required: function(element) {
                        		if( $("#segmentId").val() =='none'){
                            		return false;
                        		}
                        		else{return true;}
                   			  }
                			}
						},
						messages: {
									"node.label": { required:"Please Provide KPI Name" },
									"node.description": { required:"Please Provide Description" },
									"node.dataType": { required:"Please select Data Type" },
									"node.nodeTypeId": { required:"Please select Node Type" },
									"node.segmentId": { required:"Please select Segment" }
						}
    			});
    			
				});//End document ready functions



	</script>
<%@ include file="template/CommonFooter.jsp" %>    

 